import React, { useEffect, useRef } from 'react';
import { connect } from 'umi';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import Table from './components/Table';
import ModifyModal from './components/ModifyModal';

const RoleMgt = ({ dispatch }) => {
  const modifyModelRef = useRef({});
  useEffect(() => {
    dispatch({
      type: 'smManageRule/roleSelect',
      payload: {},
    });
  }, []);

  const openModifyModal = item => {
    modifyModelRef.current.showModal(item);
  };
  return (
    <PageHeaderWrapper>
      <Table openModifyModal={openModifyModal} />
      <ModifyModal actionRef={modifyModelRef} />
    </PageHeaderWrapper>
  );
};

export default connect(({ smManageRule }) => ({
  smManageRule,
}))(RoleMgt);
